<template>
  <div class="messageBoard">
    <el-input class="messageInf" placeholder="说点什么吧..." @focus="showMessage"></el-input>

    <!--    留言区域-->
    <div class="messageBox">
      <ul>
        <li v-for="(item,index) in leaveWorld" :key="item._id" class="messageItem">
          <h2>
            <span class="nickname">{{item.nickname}}</span>
            <span class="delete" @click="removeLeaveWorld(item._id)" v-if="jurisdiction">删除</span>
          </h2>
          <p>{{item.text}}</p>
          <div class="time">
            {{item.date}}
            <span class="iconfont icon-xia" @click="showReply(index)"></span>
            <span @click="showReply(index)">回复</span>
          </div>
          <ul class="reply">
            <div class="addReply">
              <el-input v-model="comment[index]" placeholder="回复"></el-input>
              <el-button @click="submitReply(item._id,index,item.comment)">发表</el-button>
            </div>
            <li v-for="(reply,i) in item.comment" :key="i">
              <h2>回复给 <span style="color: #00bcd4">{{item.nickname}}</span></h2>
              <p>{{reply}}</p>
              <div class="close" @click="removeReply(item._id,reply)" v-if="jurisdiction">×</div>
            </li>
          </ul>
        </li>
      </ul>
    </div>

    <!--  编辑留言-->
    <el-dialog
      title="留言"
      :visible.sync="showMessageVisible"
      width="50%"
      id="messageContainer"
      :modal="false"
      @close="close">

      <el-form ref="ruleForm" label-width="100px" class="MessageBoardForm" :rules="rules" :model="form">
        <el-form-item label="昵称" prop="nickname">
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="留言内容" prop="text">
          <el-input type="textarea" v-model="form.text"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
    <el-button @click="showMessageVisible = false" type="danger">取 消</el-button>
    <el-button type="success" @click="submitForm">发 表</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
  import {mapGetters, mapState} from 'vuex'

  export default {
    name: "messageBoard",
    data() {
      return {
        showMessageVisible: false,
        rules: {
          nickname: [
            {required: true, message: '请输入昵称', trigger: 'blur'},
          ],
          text: [
            {required: true, message: '请输入留言内容', trigger: 'blur'},
          ]
        },//表单验证
        form: {
          nickname: '',
          text: '',
        },//表单数据
        height: 0,
        comment: []
      }
    },
    methods: {
      showMessage() {
        this.showMessageVisible = true
      },
      getLeaveWorld() {
        this.$store.dispatch('getLeaveWorld')
      },  //获取留言内容
      submitForm() {
        this.$refs.ruleForm.validate(valid => {
          if (valid) {
            this.$store.dispatch('addLeaveWorld', this.form)
              .then(() => {
                this.showMessageVisible = false
              })
            this.getLeaveWorld()
          } else {
            console.log('error submit!!')
            return
          }
        })
      },  //提交表单
      removeLeaveWorld(id) {
        this.$store.dispatch('RemoveLeaveWorld', id)
        this.getLeaveWorld()
      },  //删除留言
      showReply(index) {
        this.$nextTick(() => { // 页面渲染完成后的回调
          const messageItem = document.querySelectorAll('.messageItem')
          const reply = messageItem[index].querySelector('.reply')
          const iconfont = messageItem[index].querySelector('.iconfont')
          if (iconfont.className === 'iconfont icon-xia') {
            iconfont.className = 'iconfont icon-shang'
          } else {
            iconfont.className = 'iconfont icon-xia'
          }

          if (reply.style.maxHeight == '0px' || reply.style.maxHeight == '') {
            reply.style.transition = 'max-height 1s'
            reply.style.maxHeight = '500px'
          } else {
            reply.style.maxHeight = '0px'
          }
        })
      },  //显示回复
      submitReply(id, index, comments) {
        const comment = this.comment[index]
        console.log(comment)
        if (comment === undefined || comment.trim() === '') return this.$message('请输入内容')
        if (comments == null) {
          comments = []
        } else {
          comments.unshift(comment)
        }
        this.$store.dispatch('addReply', {id, comments})
        this.getLeaveWorld()
        this.comment[index] = ''
      },  //提交回复
      removeReply(id, reply) {
        this.$store.dispatch('removeReply', {id, comment: reply})
        this.getLeaveWorld()
      },  //删除回复
      close() {
        this.$refs.ruleForm.resetFields()
      }
    },
    created() {
      this.getLeaveWorld()
    },
    computed: {
      ...mapState(['leaveWorld']),
      ...mapGetters(['jurisdiction'])
    }
  }
</script>

<style scoped lang="less">


  .messageInf {
    outline: none;
  }

  .messageBox {
    width: 100%;

    li {
      background: #222222;
      color: #808080;
      box-shadow: 0 1px 1px #fff,0 1px 1px #000 inset;
      padding: 20px 30px;
      margin-top: 20px;

      h2 {
        overflow: hidden;

        .nickname {
          color: #00bcd4;
          float: left;
          font-size: 18px;
        }

        .delete {
          float: right;
        }

        .delete:hover {
          cursor: pointer;
          color: skyblue;
        }
      }

      p {
        font-size: 14px;
        margin: 20px 0;
        text-indent: 2em;
      }

      .time {
        display: block;

        span {
          float: right;
          vertical-align: middle;
          cursor: pointer;
        }

        .iconfont:hover {
          color: skyblue;
        }
      }
    }

    .reply {
      max-height: 0px;
      overflow: hidden;
      width: 100%;

      li {
        background: #303133;
        padding-bottom: 1px;
        position: relative;

        .close {
          position: absolute;
          right: 3px;
          top: 0;
          font-size: 20px;
          cursor: pointer;
          transition: font-size .3s;
        }

        .close:hover {
          color: #00bcd4;
          font-size: 25px;
        }
      }
    }

    .addReply {
      width: 100%;
      overflow: hidden;
      margin-top: 20px;

      .el-input {
        width: 80%;
        float: left;
      }

      .el-button {
        float: right;
        background: #3d3d3d;
        color: white;
      }
    }
  }
</style>
